﻿@using QLDV.Models
@model QLDV.Models.CSD

@{
    ViewBag.Title = "TaoPhongTrao";
    Layout = "~/Views/Shared/_Layout_NoMenu.cshtml";
}
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        var t = 1;
        var tvt = 1;
        var num = 1;
        $(".TinhChatPt").change(function () {
            if ($(this).val() == 2) {
                $("#divdk").attr("style", "display:block");
            } else {
                $("#divdk").attr("style", "display:none");
            }
        });
        $(".LoaiPt").change(function () {
            $("#HanChe").attr("checked", false);
            $("#HanChe").change();
            if ($(this).val() == 1) {
                $("#GioBatDau").attr("style", "display:inline-block");
                $("#GioKetThuc").attr("style", "display:inline-block");
                $("#divnew").attr("style", "display:none");
                $(".add").remove();
                num = 1;
            } else {
                if ($(this).val() == 2) {
                    $("#GioBatDau").attr("style", "display:none");
                    $("#GioKetThuc").attr("style", "display:none");
                    $("#divnew").attr("style", "display:none");
                    $(".add").remove();
                    num = 1;
                } else {
                    $("#GioBatDau").attr("style", "display:inline-block");
                    $("#GioKetThuc").attr("style", "display:inline-block");
                    $("#divnew").attr("style", "display:inline-block");
                }
            }
        });
        $("#HanChe").change(function () {
            if ($(this).is(":checked")) {
                var html = "";
                for (var i = 0; i < num; i++) {
                    html += "<div class = '12u-first hc' id = 'dhc" + i + "'><span style='padding-right:30px;'>Giai đoạn " + (i + 1) + ": </span>";
                    html += "<input type = 'text' name = 'HanChe" + (i + 1) + "' id = 'HanChe" + (i + 1) + "'/>";
                    html += "<span style = 'padding-left:10px;'><img src='../../media/delete.png' class='delhc' id = 'delhc" + i + "' width='13px;' style='display: none;'/></span></div>";
                }
                $("#divhc").append(html);
            } else {
                $(".hc").remove();
            }
        });
        $("#DiemRenLuyen").change(function () {
            if ($(this).is(":checked")) {
                $("#divdrl").attr("style", "display:block");
            } else {
                $("#divdrl").attr("style", "display:none");
            }
        });
        $(".hc").live('mouseenter', function () {
            if ($(this).attr("id") != "") {
                var tid = "delhc" + $(this).attr("id").substr(3);
                $("#" + tid).removeAttr("style");
            }
        });
        $(".hc").live('mouseleave', function () {
            if ($(this).attr("id") != "") {
                var tid = "delhc" + $(this).attr("id").substr(3);
                $("#" + tid).attr("style", "display:none");
            }
        });
        $(".vt").live('mouseenter', function () {
            if ($(this).attr("id") != "") {
                var tid = "deldiem" + $(this).attr("id").substr(2);
                $("#" + tid).removeAttr("style");
            }
        });
        $(".vt").live('mouseleave', function () {
            if ($(this).attr("id") != "") {
                var tid = "deldiem" + $(this).attr("id").substr(2);
                $("#" + tid).attr("style", "display:none");
            }
        });
        $(".dtime").live('mouseenter', function () {
            if ($(this).attr("id") != "") {
                var tid = "deltime" + $(this).attr("id");
                $("#" + tid).removeAttr("style");
            }
        });
        $(".dtime").live('mouseleave', function () {
            if ($(this).attr("id") != "") {
                var tid = "deltime" + $(this).attr("id");
                $("#" + tid).attr("style", "display:none");
            }
        });
        $(".deldiem").live('click', function () {
            var tid = $(this).attr("id").substr(7);
            $("#vt" + tid).remove();
        });
        $(".delhc").live('click', function () {
            var tid = $(this).attr("id").substr(5);
            $("#dhc" + tid).remove();
        });
        $(".del").live('click', function () {
            var tid = $(this).attr("id").substr(7);
            $("#" + tid).remove();
            $("#HanChe").attr("checked", false);
            $("#HanChe").change();
            num--;
        });
        $(".newvt").live('click', function () {
            tvt = tvt + 1;
            var html = "<div class='12u-first vt' id = 'vt" + tvt + "'>";
            html += "<div class='6u-first'><input type='text' id='VaiTro" + tvt + "' class='VaiTro" + tvt + " editing'/></div>";
            html += "<div class='4u'><input type='text' id='DiemSo" + tvt + "' class='DiemSo" + tvt + " editing'/></div>";
            html += "<div class='2u'><img src='../../media/delete.png' class='deldiem' id = 'deldiem" + tvt + "' width='13px;' style='display: none;'/></div>";
            html += "</div>";
            $("#divvt").append(html);
            $("#divvt").append($("#divnewvt"));
        });
        $(".new").live('click', function () {
            t = t + 1;
            var html = "<div class='12u-first dtime add' id = '" + t + "' style='width:100%'>";
            html += "<div class='1u-first'><input type='text' id = 'GioBatDau" + t + "' name = 'GioBatDau" + t + "' class = 'editing time'/></div>";
            html += "<div class='2u'><input type='text' id = 'NgayBatDau" + t + "' name = 'NgayBatDau" + t + "' class = 'editing date'/></div>";
            html += "<div class='1u'>đến</div>";
            html += "<div class='1u'><input type='text' id = 'GioKetThuc" + t + "' name = 'GioKetThuc" + t + "' class = 'editing time'/></div>";
            html += "<div class='2u'><input type='text' id = 'NgayKetThuc" + t + "' name = 'NgayKetThuc" + t + "' class = 'editing date'/></div>";
            html += "<div class='1u'>tại</div>";
            html += "<div class='3u'><input type='text' id = 'DiaDiem" + t + "' name = 'DiaDiem" + t + "' class = 'editing'/></div>";
            html += "<div class='1u'><img src='../../media/delete.png' class='del' id = 'deltime" + t + "' width='13px;' style='display: none;'/></div>";
            $("#time").append(html);
            $("#time").append($("#divnew"));
            $("#GioBatDau" + t).timepicker({ timeFormat: 'h:m', stepHour: 1, stepMinute: 10 });
            $("#GioKetThuc" + t).timepicker({ timeFormat: 'h:m', stepHour: 1, stepMinute: 10 });
            $("#NgayBatDau" + t).datepicker({ dateFormat: "dd/mm/yy" });
            $("#NgayKetThuc" + t).datepicker({ dateFormat: "dd/mm/yy" });
            num++;
        });
    });
    $(function () {
        $(".date").datepicker({ dateFormat: "dd/mm/yy" });
        $(".time").timepicker({ timeFormat: 'h:m',stepHour:1, stepMinute:10 });
    });
</script>
<div class="5grid">
    @Html.Partial("_MenuCSD")
    <div class="12u-first">
        <div id="display" style="height: 20px;">
            <h5 style="margin-top:0px;">TẠO HOẠT ĐỘNG MỚI</h5>
        </div>
    </div>
    <div class="3u-first">
        @Html.Partial("_MenuPT")
    </div>
@using (Html.BeginForm("ViewInfo", "DoanVien", FormMethod.Post, new { id = "myform" }))
{
    <div class="9u">
        <div class="sidebar_section" style="border: 0px;" >
            <div class="3u-first">Tên phong trào</div>
            <div class="9u">
                <input type="text" id = "TenPhongTrao" name = "TenPhongTrao" class = "editing"/>
            </div>
            <div class="3u-first"><input type="radio" name="LoaiPt" id="LoaiPt" class="LoaiPt" value="1" checked="true"/>Khoảng thời gian</div>
            <div class="2u"><input type="radio" name="LoaiPt" id="LoaiPt" class="LoaiPt" value="2" />Cả ngày</div>
            <div class="2u"><input type="radio" name="LoaiPt" id="LoaiPt" class="LoaiPt" value="3" />Nhiều ngày</div>

            <div id="time">
                <div class="12u-first dtime" style="width: 100%">
                    <div class="1u-first"><input type="text" id = "GioBatDau" name = "GioBatDau" class = "editing time"/></div>
                    <div class="2u"><input type="text" id = "NgayBatDau" name = "NgayBatDau" class = "editing date"/></div>
                    <div class="1u">đến</div>
                    <div class="1u"><input type="text" id = "GioKetThuc" name = "GioKetThuc" class = "editing time"/></div>
                    <div class="2u"><input type="text" id = "NgayKetThuc" name = "NgayKetThuc" class = "editing date"/></div>
                    <div class="1u">tại</div>
                    <div class="3u"><input type="text" id = "DiaDiem" name = "DiaDiem" class = "editing"/></div>
                    <div class="1u"><img src="../../media/delete.png" class="del" id = "deltime" width="13px;" style="display: none;"/></div>
                </div>
                <div class="12u-first" id="divnew" style="display: none"><img src="../../media/new.png" class="new" width="10px;" /></div>
            </div>
            <div class="12u-first"><strong>Mô tả:</strong></div>
            <div class="12u-first">      
                <textarea type="text" id = "MoTa" name = "MoTa" class = "editing"></textarea>
            </div>
        </div>
        <div class="sidebar_section" style="border: 0px;">
            <div class="sidebar_title">
                <h4>Tính chất hoạt động</h4>
                <small>Điểm rèn luyện, cho phép đăng ký...</small>
            </div>
            <div class="2u-first"><input type="radio" name="TinhChatPt" id="TinhChatPt" class="TinhChatPt" value="1" checked="true"/>Tự do</div>
            <div class="2u"><input type="radio" name="TinhChatPt" id="TinhChatPt" class="TinhChatPt" value="2" />Đăng ký</div>
            <div id="divdk" style="display: none;">
                <div class="12u-first">
                    <div><input type="checkbox" name="HanChe" id="HanChe" value="1"/>Hạn chế số người tham dự</div>
                    <div id="divhc">
                    </div>
                    <br/>
                    <div><input type="checkbox" name="DiemRenLuyen" id="DiemRenLuyen" value="1"/>Có điểm rèn luyện</div>
                </div>
                <div id="divdrl" style="display: none;">
                    <div class="12u-first">
                        <span style="padding-right:30px;">Chọn mảng hoạt động:</span>
                        <select name="manghoatdong" id="manghoatdong">
                            @Html.Raw(ViewBag.mhd)
                        </select>
                    </div>
                    <div class="6u-first"><strong>Vai trò tham gia</strong></div>
                    <div class="6u"><strong>Điểm rèn luyện</strong></div>
                    <div id="divvt">
                        <div class="12u-first vt">
                            <div class="6u-first"><input type="text" id="VaiTro" class="VaiTro editing" value="Tham gia hoạt động"/></div>
                            <div class="4u"><input type="text" id="DiemSo" class="DiemSo editing" value="0"/></div>
                            <div class="2u"><img src="../../media/delete.png" class="deldiem" id = "deldiem" width="13px;" style="display: none;"/></div>
                        </div>
                        <div class="12u-first" id="divnewvt"><img src="../../media/new.png" class="newvt" width="10px;" /></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="12u-first"><input type = "submit" value ="Lưu"/></div>
    </div>
}
</div>